<template>
  <div>
    <a-card :bordered="false">
      <div class="table-page-search-wrapper">
        <a-form layout="inline">
          <a-row :gutter="48" @keyup.enter.native="searchList">
            <a-col :xxl="6" :lg="8" :md="12" :sm="24">
              <a-form-item label="搜索名称">
                <a-input v-model="queryParam.search" placeholder="请输入订阅编号、手机号、昵称、搭配师" allowClear />
              </a-form-item>
            </a-col>
            <a-col :xxl="6" :lg="8" :md="12" :sm="24">
              <a-form-item label="订阅状态">
                <a-select v-model="queryParam.status" placeholder="请选择" default-value="null" :getPopupContainer="triggerNode => triggerNode.parentNode">
                  <a-select-option value="">不限</a-select-option>
                  <a-select-option :value="1">已订阅</a-select-option>
                  <a-select-option :value="2">已退订</a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :xxl="6" :lg="8" :md="12" :sm="24">
              <a-form-item label="分类">
                <a-select v-model="queryParam.categoryId" placeholder="请选择" default-value="null" :getPopupContainer="triggerNode => triggerNode.parentNode">
                  <a-select-option value="">不限</a-select-option>
                  <a-select-option :value="item.id" v-for="item in categoryList" :key="item.id">{{ item.name }}</a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :xxl="6" :lg="8" :md="12" :sm="24">
              <a-form-item label="开始时间">
                <a-date-picker style="width: 100%" valueFormat="YYYY-MM-DD" format="YYYY-MM-DD" showToday v-model="queryParam.startTime" @change="searchList" />
              </a-form-item>
            </a-col>
            <a-col :xxl="6" :lg="8" :md="12" :sm="24">
              <a-form-item label="结束时间">
                <a-date-picker style="width: 100%" valueFormat="YYYY-MM-DD" format="YYYY-MM-DD" showToday v-model="queryParam.endTime" @change="searchList" />
              </a-form-item>
            </a-col>
            <a-col :xxl="6" :lg="8" :md="12" :sm="24">
              <a-form-item label="搭配师/导购">
                <a-select v-model="queryParam.fashionerType" placeholder="请选择" :getPopupContainer="triggerNode => triggerNode.parentNode">
                  <a-select-option value="">不限</a-select-option>
                  <a-select-option :value="0">搭配师</a-select-option>
                  <a-select-option :value="1">导购</a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :xxl="12" :lg="24" :md="24" :sm="24">
              <span class="table-page-search-submitButtons" :style="{ float: 'right', overflow: 'hidden' }">
                <a-button type="primary" @click="searchList">查询</a-button>
                <a-button style="margin-left: 8px" @click="resetList">重置</a-button>
              </span>
            </a-col>
          </a-row>
        </a-form>
      </div>
      <s-table ref="table" size="default" :rowKey="record => record.id" :columns="columns" :data="loadData" :pagination="paginationProps" :scroll="{ x: 1200 }">
        <span slot="categoryId" slot-scope="text">{{ categoryName(text) }}</span>
        <span slot="status" slot-scope="text">{{ text | subStatus }}</span>
        <span slot="subType" slot-scope="text">{{ text | subWay }}</span>
        <span slot="fashionerType" slot-scope="text">{{ text | fashionerType }}</span>
        <span slot="action" slot-scope="text, record">
          <a @click="handleEdit(record)">编辑</a>
          <a-divider type="vertical" />
          <a-button type="link" disabled v-if="record.status == 2" style="padding:0;border:none;">退订</a-button>
          <a @click="handleRecall(record)" v-else>退订</a>
        </span>
      </s-table>
    </a-card>
    <SubDetailDrawer ref="detailModal"></SubDetailDrawer>
    <UnSubModal ref="recallModal" @refreshTable="refreshTable"></UnSubModal>
  </div>
</template>
<script>
import { listMixin } from './listMixin'
import { subscribeList } from '@/api/box/marketing'
import { getUserClassification } from '@/api/box/api'
import SubDetailDrawer from './modules/subDetailDrawer'
import UnSubModal from './modules/unSubModal'
import './filter.js'
const columns = [
  { title: '订阅编号', width: 180, align: 'center', fixed: 'left', dataIndex: 'subSn' },
  { title: '订阅内容', width: 100, align: 'center', customRender: text => 'BOX服务' },
  { title: '有效期', width: 200, align: 'center', customRender: (text, record) => `${record.startTime}-${record.endTime}` },
  { title: '订阅状态', width: 100, dataIndex: 'status', align: 'center', scopedSlots: { customRender: 'status' } },
  { title: '昵称', dataIndex: 'nickName', align: 'center' },
  { title: '手机号', dataIndex: 'phone', align: 'center' },
  { title: '类型', dataIndex: 'categoryId', align: 'center', scopedSlots: { customRender: 'categoryId' } },
  { title: '订阅来源', dataIndex: 'subType', align: 'center', scopedSlots: { customRender: 'subType' } },
  // { title: '未处理 / 进行中',  align: 'center' },
  { title: '搭配师', dataIndex: 'fashionerName', align: 'center' },
  { title: '搭配师类型', dataIndex: 'fashionerType', align: 'center', scopedSlots: { customRender: 'fashionerType' } },
  { title: '操作', fixed: 'right', width: 120, align: 'center', scopedSlots: { customRender: 'action' } }
]
export default {
  mixins: [listMixin],
  components: { SubDetailDrawer, UnSubModal },
  data() {
    return {
      columns,
      queryParam: {
        categoryId: '',
        fashionerType: '',
        status: ''
      },
      categoryList: [],
      // 加载数据方法 必须为 Promise 对象
      loadData: parameter => this.fetchData(parameter)
    }
  },
  computed: {
    categoryName() {
      return text => {
        let result = this.categoryList.filter(e => e.id == text)
        if (result.length > 0) {
          return result[0].name
        } else {
          return text
        }
      }
    }
  },
  created() {
    this.fetchTypeList()
  },
  methods: {
    fetchData(parameter) {
      let formValue = this.filterFields(this.queryParam)
      let params = {
        page: parameter,
        requestData: formValue
      }
      return this.fetchList(params, subscribeList).then(res => {
        if (res.code == 0) {
          return {
            data: res.data,
            page: res.page
          }
        } else {
          this.$message.warning(res.msg)
          return {
            data: [],
            page: {
              pageNo: 0,
              count: 0,
              pageSize: 10
            }
          }
        }
      })
    },
    filterFields(values) {
      const formValue = {}
      Object.keys(values).forEach(i => {
        if (values[i] !== '' && values[i] !== undefined && values[i] !== null) {
          if (i === 'timePicker') {
            formValue.startTime = values[i][0]
            formValue.endTime = values[i][1]
          } else {
            formValue[i] = values[i]
          }
        }
      })
      return formValue
    },
    fetchTypeList() {
      getUserClassification().then(res => {
        if (res.code == 0) {
          this.categoryList = res.data
        } else {
          this.$message.warning(res.msg)
        }
      })
    },
    handleRecall(record) {
      this.$refs.recallModal.show(record)
    },
    refreshTable() {
      this.$refs.table.refresh()
    }
  }
}
</script>

